<template>
    	<section class="border padding">
            <el-row class="post_comment_line"></el-row>
		<el-row v-if="isMng=='1'" class="app-container" style=" margin-bottom: 20px;">
			<el-input v-model="filters.key" style="width: 20%;" placeholder="模糊查询"></el-input> 
			<el-radio v-model="filters.isShow" label="">全部评论</el-radio>
			<el-radio v-model="filters.isShow" label="0">屏蔽的评论</el-radio> 
  			<el-radio v-model="filters.isShow" label="1">打开的评论</el-radio>
			<el-button type="primary" v-loading="load.list" v-on:click="searchTableDatas">查询</el-button>
			
		</el-row>
		<el-row v-if="isMng!='1'">
			<el-col :span="24"><el-input type="textarea" :rows="4" v-model="addForm.context"></el-input></el-col> 
			<el-col :span="8" style="color:#8590a6;">网友评论仅供其表达个人看法，并不表明本站立场。</el-col>
			<el-col  :offset="16" style="margin-top: 5px;"><el-button type="primary" @click="addSubmit">发表评论</el-button><el-button type="primary" @click="searchTableDatas">浏览评论</el-button></el-col> 
		</el-row>
		<el-row> 

			<el-row v-for="o,idx in tableDatas" :key="idx">
				<el-row>
					<el-col :span="1" style="text-align:left;">
						<img src="../../../../../assets/image/user_img.gif"  style="text-align:left; width:40px;height:40px;"></img>
					</el-col>
					<el-col :span="22">
						<el-row style=" margin-bottom:5px;">
							<el-col :span="14" style="text-align:left;">{{o.username}} <span style="color:#8590a6">{{o.toUsername!=null && o.toUsername!=''?'回复':''}}</span> {{o.toUsername}}</el-col>
							<el-col :offset="16" style="color:#8590a6;text-align:righ;"><span>{{o.createDate}}</span></el-col>
						</el-row>
						<el-row>
							<div v-if="o.isShow=='1'" v-html="o.context"> </div>
							<div v-if="o.isShow=='0' && isMng!='1'">该评论不可见</div>
						</el-row>
						<el-row>
							 <el-col :offset="16"><el-button type="text" @click="praiseHandle(o)">赞[{{o.praiseSum}}]</el-button><el-button type="text" @click="handleReply(o,o)">回复</el-button><el-button v-if="o.isShow=='1'  && isMng=='1' " type="text" @click="unShowOneComment(o)">关闭</el-button><el-button  v-if="o.isShow=='0'  && isMng=='1' " type="text" @click="showOneComment(o)">打开</el-button><el-button type="text" @click="searchTableDatasByPcommentId(o)">查看全部跟帖</el-button></el-col>
						</el-row> 
					</el-col>
				</el-row>
				<el-row v-if=" o.children !=undefined && o.children!==null && o.children.length > 0 " >
					<el-col :offset="1" :span="23" v-for=" o1,idx1 in o.children" :key="idx1">
						<el-col :span="1" style="text-align:left;">
							<img src="../../../../../assets/image/user_img.gif" style="text-align:left; width:40px;height:40px;"></img>
						</el-col>
						<el-col :span="22">
							<el-row  style=" margin-bottom:5px;">
							<el-col :span="14" style="text-align:left;">{{o1.username}} <span style="color:#8590a6">{{o1.toUsername!=null && o1.toUsername!=''?'回复':''}}</span> {{o1.toUsername}}</el-col>
							<el-col :offset="16" style="color:#8590a6;text-align:righ;"><span >{{o1.createDate}}</span></el-col>
							</el-row>
							<el-row>
								<div v-if="o1.isShow=='1'" v-html="o1.context"> </div>
								<div v-if="o1.isShow=='0' && isMng!='1'">该评论不可见</div>
							</el-row>
							<el-row>
								 <el-col :offset="16"><el-button type="text"  @click="praiseHandle(o1)">赞[{{o1.praiseSum}}]</el-button><el-button type="text" @click="handleReply(o,o1)">回复</el-button><el-button v-if="o1.isShow=='1' && isMng=='1'" type="text" @click="unShowOneComment(o1)">关闭</el-button><el-button  v-if="o1.isShow=='0' && isMng=='1'" type="text" @click="showOneComment(o1)">打开</el-button></el-col>
							</el-row> 
						</el-col>					
					</el-col>
					<el-col>
						<el-pagination  size="small" layout="total, sizes, prev, pager, next"   @current-change="handleChildrenCurrentChange" :current-page="childrenPageInfo.pageNum" :page-size="childrenPageInfo.pageSize"  :total="childrenPageInfo.total" style="float:right;"></el-pagination> 
					</el-col> 
				</el-row>
				<el-row class="line"></el-row>
			</el-row>
			<el-pagination v-if="showPageInfo==true" size="small" layout="total, sizes, prev, pager, next" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10,20, 50, 100, 500]" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"  :total="pageInfo.total" style="float:right;"></el-pagination> 
		 
		</el-row>
		<el-row>
			<!--新增修改明细 ArchiveComment 档案评论表界面-->
            <mdp-dialog :ref="refId+'FormDialog'">
                <template v-slot="{visible,data,dialog}">
                     <archive-comment-form :ref="refId+'Form'" :visible="visible" :parent-op-type="currOpType" :sub-op-type="data.subOpType" :form-data="data.formData" @close="onFormClose" @submit="afterFormSubmit" @fields-change="afterEditSomeFields"/>
                </template>
            </mdp-dialog> 
            <mdp-dialog ref="replyDialog">
                <template v-slot="{visible,data,dialog}">
                     <archive-comment-reply ref="reply" :visible="visible" :parent-op-type="currOpType" :sub-op-type="data.subOpType" :form-data="data.formData" @close="dialog.close()" @submit="afterFormSubmit" @fields-change="afterEditSomeFields"/>
                </template>
            </mdp-dialog>
 	    </el-row>
	</section>
</template>

<script>

import { MdpTableMixin } from '@/components/mdp-ui/mixin/MdpTableMixin.js';
import * as ArchiveCommentApi from '@/api/mdp/arc/archive/archiveComment';
import  ArchiveCommentForm from './Form';//新增修改明细界面
import  ArchiveCommentReply from './Reply';//新增修改明细界面
import { mapGetters } from 'vuex'

export default {
    name:'archiveCommentTree',
    mixins:[MdpTableMixin],
    props:{
        archiveId:String,
        isMng:{
            type:String,
            default:'0'
        }
    },
    components: {
        ArchiveCommentForm,ArchiveCommentReply
    },
    computed: {
    },
    watch:{
    },
    data() {
        return {
            menuDefId:'',//menu_def.id 菜单表菜单编号，用于按钮权限判断
            menuDefName:'档案评论表',//menu_def.name 功能名称，用于导出excel等文件名
            refId:'archiveComment',//引用编号，<table :ref="refId+'Table'"> <form :ref="refId+'Form'">
            pkNames:["id"],//表格主键的java属性名称，驼峰命名，默认为id,支持多主键
            currOpType:'mng',//表格 mng-综合管理具有最大权限，所有按钮可动、detail-只看不能操作
            filters:{//查询参数

            },
            defaultFilters:{//默认查询参数,第一次打开界面的时候用到，恢复默认值的时候用到

            },

            defaultCheckColumnNum:8,//默认展示的表格列数，前8列

            //增删改查(含批量)接口
            apis:{
                list: ArchiveCommentApi.listArchiveComment,
                add: ArchiveCommentApi.addArchiveComment,
                del: ArchiveCommentApi.delArchiveComment,
                edit: ArchiveCommentApi.editArchiveComment,
                editSomeFields: ArchiveCommentApi.editSomeFieldsArchiveComment,
                batchAdd: ArchiveCommentApi.batchAddArchiveComment,
                batchDel: ArchiveCommentApi.batchDelArchiveComment,
                batchEdit: ArchiveCommentApi.batchEditArchiveComment,
            },
            childrenPageInfo: {
                total:0,//服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算. 
                pageSize:10,//每页数据
                pageNum:1,//当前页码、从1开始计算
                orderFields:[],//排序列 如 ['sex','student_id']，必须为数据库字段
                orderDirs:[],//升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc']
            },
            showPageInfo:false, 
        }
    },
    methods: {
         //页面初始化需要配置的特殊逻辑写这里
          initCurrData(){
             this.searchTableDatas();
          },

          /**
           * 检查参数是否满足调用后台接口的条件
           *
           * @param params 提交给后台的参数池,map类型
           * @returns true / false
           */
          preQueryParamCheck(params){
            params.archiveId=this.archiveId
              return true;
          },

          //页面数据加载完后需要对数据进行加工处理的
          afterList(res,isOk,apiName){
            if(res.data.data && res.data.data.length>0){
                res.data.data.forEach(i=>{
                    i._reply=false
                    i.children=[]
                });
            }
          },

          /**
           * 对修改的字段进行判断，返回false ,将取消更新数据库
           * @param {*} row 当前选中的行
           * @param {*} fieldName 修改的字段名
           * @param {*} $event 修改后的值
           * @param {*} params 将要提交服务器的参数
           * @returns true/false 返回false ,将取消更新数据库
           */
          editSomeFieldsCheck(row,fieldName,$event,params){
              if(this.currOpType=='add'||this.currOpType=='detail'){
                  return false;
              }
              params[fieldName]=$event
              return true;
          },
           /**
           * 设置某个关键词、按钮、输入框禁用 disabledRules['addBtn']=false
           * 判断某个对象是否可编辑 this.disabledJudge('addBtn')==false
           */
          disabledRulesInit(disabledRules){

          },
         /**
          * 打开某个子页面
          */
        openForm(res){
            let {parentOpType,formRefId,subOpType,formData} = res
            if(!formRefId){
                formRefId=this.getRefId()+"FormDialog"
            }
            if(!parentOpType){
                parentOpType=this.currOpType
            }
            var form=this.$refs[formRefId]
            if(form){
                res.parentOpType=parentOpType
                res.formRefId=formRefId
                form.open(res);
            }else{

            }

        },
        
        handleChildrenCurrentChange(pageNum) {
            this.pageInfo.children.pageNum = pageNum;
            this.getArchiveCommentsByPcommentId(this.editForm);
        },
        batchShowComment: function(){
            let ids=this.sels.map(i=>i.id);
            this.load.edit=true
            ArchiveCommentApi.showComment(ids).then(res=>{
                this.load.edit=false
                this.searchTableDatas();
            })
        },
        batchUnShowComment: function(){
            this.load.edit=true
            let ids=this.sels.map(i=>i.id);
            ArchiveCommentApi.unShowComment(ids).then(res=>{
                this.load.edit=false
                this.searchTableDatas();
            })
        },
        showArchive: function( row,index ){
            this.$router.push({ path: '/mdp/arc/mate/archive/ArchiveDetail/'+row.archiveId,query:{isMng:'1'} })
        },
        searchTableDatasByPcommentId(pcomment){
            this.editForm=pcomment;
            let params = {
                pageSize: this.childrenPageInfo.pageSize,
                pageNum: this.childrenPageInfo.pageNum,
                total: this.childrenPageInfo.total
            };
            if(this.childrenPageInfo.orderFields!=null && this.childrenPageInfo.orderFields.length>0){
                params.orderFields=this.childrenPageInfo.orderFields;
                params.orderDirs=this.childrenPageInfo.orderDirs;
            } 
            this.load.list = true;
            params.pcommentId=pcomment.id
            ArchiveCommentApi.listArchiveComment(params).then((res) => {
                var tips=res.data.tips;
                if(tips.isOk){ 
                    this.childrenPageInfo.total = res.data.data.total;
                    this.afterList(res,tips.isOk,"listArchiveComment")
                    pcomment.children=res.data.data;
                 }else{
                    this.$message({ message: tips.msg, type: 'error' });
                } 
                this.load.list = false;
            }).catch(() => {
                this.load.list = false;
             });
        }, 
        handleReply(pcomment,comment){
             this.$refs['replyDialog'].open({formData:comment,subOpType:'add',title:'回复'})
        },
        praiseHandle(comment){
            ArchiveCommentApi.praiseComment({id:comment.id}).then(res=>{
                if(res.data.tips.isOk){
                    if(!comment.praiseSum){
                        comment.praiseSum=0
                    }
                    comment.praiseSum=parseInt(comment.praiseSum)+1;
                }else{
                    this.$message({ message: tips.msg, type: 'error' }); 
                }
            });
        },
        showOneComment(comment){
            ArchiveCommentApi.showComment([comment.id]).then(res=>{
                comment.isShow='1'
            });
        },
        unShowOneComment(comment){
            ArchiveCommentApi.unShowComment([comment.id]).then(res=>{
                comment.isShow='0'
            });
        },
        addSubmit(){
            var params={}
            params.id=null;
            params.pcommentId=''
            params.toUserid=''
            params.toUsername=''
            params.archiveId=this.archiveId
            params.branchId=this.userInfo.branchId
            params.userid=this.userInfo.userid
            params.username=this.userInfo.username
            params.isShow='1'
            params.star='0'
            params.praiseSum='0' 
            params.context=this.addForm.context
            ArchiveCommentApi.addArchiveComment(params).then(res=>{
                var tips = res.data.tips;
                if(!tips.isOk){
                    this.$message.error(tips.msg) 
                }else{
                    this.$message.success(tips.msg)
                    this.searchTableDatas();
                }
            })
        }
    },
    mounted() {

    }
}

</script>

<style scoped>
</style>